<template>
	<Echart id="rightTop" :options="option" class="right_top_inner" v-if="pageflag" ref="charts" />
	<Reacquire v-else @onclick="getData" style="line-height: 200px">
		重新获取
	</Reacquire>
</template>

<script>
import { currentGET } from "api/modules";
import { graphic } from "echarts"
export default {
	data() {
		return {
			regionCode: 'china',
			option: {},
			pageflag: false,
			timer: null,
		};
	},
	created() {
		this.getData('china')
	},

	mounted() {
		this.getData('china');
	},
	beforeDestroy() {
		this.clearData();
	},
	methods: {
		clearData() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		getData(regionCode) {
			this.pageflag = true;
			this.regionCode = regionCode;
			// this.pageflag = false;
			if (regionCode == "china" || regionCode == "100000") {
				this.$axios.get("/api/result/height").then((res) => {
					if (!this.timer) {
						console.log("实时报道数据", res);
					}
					if (res.code == 0) {
						this.countUserNumData = res.data;
						this.$nextTick(() => {
							// 自定义的 dateList
							const dateList = ['150', '160', '170', '180', '190', '190+'];
							// 初始化一个六个元素的数组，初始值为0
							const numList = [0, 0, 0, 0, 0, 0];

							// 遍历传入的数据，并根据范围分类
							Object.keys(res.data).forEach(key => {
								const value = parseInt(key);
								const count = res.data[key];

								if (value < 150) {
									numList[0] += count;
								} else if (value >= 150 && value <= 160) {
									numList[1] += count;
								} else if (value >= 161 && value <= 170) {
									numList[2] += count;
								} else if (value >= 171 && value <= 180) {
									numList[3] += count;
								} else if (value >= 181 && value <= 190) {
									numList[4] += count;
								} else {
									numList[5] += count; // 190以上
								}
							});

							// 将 dateList 和 计算好的 numList 传递给 init 方法
							this.init(dateList, numList, res.data.numList2 || []);
							this.switper();
						});
					} else {
						this.pageflag = false;
						this.$Message.warning(res.message);
					}
				});
			}
			else {
				this.$axios.get(`/api/result/height/${regionCode}`).then((res) => {
					if (!this.timer) {
						console.log("实时报道数据", res);
					}
					if (res.code == 0) {
						this.countUserNumData = res.data;
						this.$nextTick(() => {
							// 自定义的 dateList
							const dateList = ['150', '160', '170', '180', '190', '190+'];
							// 初始化一个六个元素的数组，初始值为0
							const numList = [0, 0, 0, 0, 0, 0];

							// 遍历传入的数据，并根据范围分类
							Object.keys(res.data).forEach(key => {
								const value = parseInt(key);
								const count = res.data[key];

								if (value < 150) {
									numList[0] += count;
								} else if (value >= 150 && value <= 160) {
									numList[1] += count;
								} else if (value >= 161 && value <= 170) {
									numList[2] += count;
								} else if (value >= 171 && value <= 180) {
									numList[3] += count;
								} else if (value >= 181 && value <= 190) {
									numList[4] += count;
								} else {
									numList[5] += count; // 190以上
								}
							});

							// 将 dateList 和 计算好的 numList 传递给 init 方法
							this.init(dateList, numList, res.data.numList2 || []);
							this.switper();
						});
					} else {
						this.pageflag = false;
						this.$Message.warning(res.message);
					}
				});
			}

		},
		//轮询
		switper() {
			if (this.timer) {
				return;
			}
			let looper = (a) => {
				this.getData(this.regionCode);
			};
			this.timer = setInterval(
				looper,
				this.$store.state.setting.echartsAutoTime
			);
			let myChart = this.$refs.charts.chart;
			myChart.on("mouseover", (params) => {
				this.clearData();
			});
			myChart.on("mouseout", (params) => {
				this.timer = setInterval(
					looper,
					this.$store.state.setting.echartsAutoTime
				);
			});
		},
		init(xData, yData, yData2) {
			this.option = {
				xAxis: {
					type: "category",
					data: xData,
					boundaryGap: false, // 不留白，从原点开始
					splitLine: {
						show: false,
						lineStyle: {
							color: "#005B30",
						},
					},
					axisLine: {
						show: false,
						lineStyle: {
							color: "#005B30",
						},
					},
					axisLabel: {
						color: "#005B30",
						fontSize: 16,
					},
				},
				yAxis: {
					// show: false,
					type: "value",
					splitLine: {
						show: false,
						lineStyle: {
							color: "#005B30",
						},
					},
					axisLine: {
						// show: false,
						lineStyle: {
							color: "#005B30",
						},
					},
					axisLabel: {
						// show: false,
						color: "#005B30",
						fontSize: 16,
					},
				},
				// 提示框
				tooltip: {
					trigger: "axis",
					backgroundColor: "#f8faf7",
					borderColor: "#009a44",
					borderWidth: 1.5,
					textStyle: {
						fontFamily: "Microsoft YaHei",
						fontSize: 20,
						color: "#233a18",
					},
				},
				grid: {
					// 布局
					show: true,
					left: "0px",
					right: "16px",
					bottom: "0px",
					top: "45px",
					containLabel: true,
					borderColor: "#00000000",
				},
				series: [
					{
						data: yData,
						type: "line",
						smooth: true,
						symbol: "none", // 去除点
						name: "人数",
						color: "#a23e0a",
						areaStyle: {
							// 右，下，左，上
							color: new graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: "#b3612f",
									},
									{
										offset: 1,
										color: "#f5ebe0",
									},
								],
								false
							),
						},
						markPoint: {
							data: [
								// 最高点提示框
								{
									name: "最大值",
									type: "max",
									valueDim: "y",
									symbol: "rect",
									symbolSize: [60, 26],
									symbolOffset: [0, -20],
									itemStyle: {
										color: "rgba(0,0,0,0)",
									},
									label: {
										// show: false,
										fontFamily: "Microsoft YaHei",
										fontSize: 14,
										color: "#a23e0a",
										backgroundColor: "#f5ebe0",
										borderRadius: 4,
										padding: [7, 14],
										borderWidth: 1,
										borderColor: "#a23e0a",
										formatter: "人数：{c}",
									},
								},
								// 最高点
								{
									name: "最大值",
									type: "max",
									valueDim: "y",
									symbol: "circle",
									symbolSize: 6,
									itemStyle: {
										color: "#a23e0a",
										shadowColor: "#a23e0a",
										shadowBlur: 8,
									},
									label: {
										formatter: "",
									},
								},
							],
						},
					},
				],
			};
		},
	},
};
</script>
<style lang='scss' scoped>
.right_top_inner {
	margin-top: -8px;
}
</style>